<template>
	<view class="outer_box">
		<view class="logistics-box">
			<view class="logistics">
				<view class="">物流公司：</view>
				<!-- <view class="">选择物流公司</view> -->
				<picker class="ml--1" @change="bindPickerChange" :value="index" :range="array" :range-key="'com'">
					<view class="uni-input">{{array[index].com}}</view>
				</picker>
				<view class="qianjin">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode=""></image>
				</view>
			</view>
			<view class="logistics">
				<view class="">物流单号：</view>
				<input type="text" value="" placeholder="填写物流单号" v-model="number"/>
				<!-- <view class="">填写物流单号</view>
				<view class="saoma">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode=""></image>
				</view> -->
			</view>
			
		</view>
		<view class="btn-box">
			<view class="btn" @tap="openRefundInfo">
				提交
			</view>
		</view>
		
	</view>
</template>

<script>
	import DHL from '../../components/DHL.js'
	export default {
		data() {
			return {
				index:0,
				array:"",
				name:'',
				number:'',
				orderNumber:''
			}
		},
		onLoad(option) {
			this.array = DHL.result
			this.name = this.array[0]
			this.orderNumber = option.orderNumber
		},
		onShow() {
			console.log(DHL)
		},
		methods: {
			bindPickerChange: function(e) {
				var _this = this
				_this.index = e.target.value
				console.log(e)
				_this.name = _this.array[e.target.value].com
				console.log(_this.name)
			},
			openRefundInfo(){
				// this.$api.waybillnumber({
				// 	orderNumber: this.orderNumber,
				// 	waybillName: this.name,
				// 	waybillNumber: this.number,
				// 	type: 2
				// }).then((res) => {
				// 	if(res.data.success){
				// 		uni.showToast({
				// 			title: "提交成功",
				// 			duration: 1000,
				// 		});
				// 		this.number = ''
				// 		// uni.$emit('odd',1)
				// 		uni.navigateBack(1)
				// 	}else{
				// 		uni.showToast({
				// 			title: res.data.message,
				// 			duration: 1000,
				// 		});
				// 	}
				// })
				uni.$emit('odd',1)
				uni.navigateBack(1)
			}
			
		}
	}
</script>

<style lang="less" scoped>
	page{
		background-color: #F8F8F8;
	}
	.uni-input{
		width: 500rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}
	.btn-box {
		display: flex;
		justify-content: center;
	
		.btn {
			width: 82%;
			height: 100upx;
			background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
			border-radius: 50upx;
			color: #FEFEFE;
			font-size: 32upx;
			line-height: 100upx;
			text-align: center;
			margin: 80rpx 0;
		}
	
	}
	.logistics-box{
		display: flex;
		flex-direction: column;
		.logistics{
			background-color: #fff;
			padding: 30rpx 20rpx;
			display: flex;
			margin-top: 2rpx;
			input{
				width: 560rpx;
			}
			view:nth-child(1){
				flex: 3;
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
			}
			view:nth-child(2){
				flex: 10;
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
			}
			view:nth-child(3){
				flex: 1;
			}
			.saoma{
				image{
					width: 12rpx;
					height: 20rpx;
				}
			}
			.qianjin{
				image{
				width: 12rpx;
				height: 20rpx;
				}
			}
			
		}
		
	}

</style>
